<template>
	<view>
		<uni-nav-bar title="种植" backgroundColor="#0000" color="#FFFFFF" />

		<view class="nav-cate">
			<view @click="tabTaskNav(0)" class="cate" :class="tabIndex == 0?'taskActive':''">
				药材品类
				<view v-if="tabIndex == 0" class="task_tab_xhx"></view>
			</view>
			<view @click="tabTaskNav(1)" class="cate" :class="tabIndex == 1?'taskActive':''">
				当前拥有
				<view v-if="tabIndex == 1" class="task_tab_xhx"></view>
			</view>
			<view @click="tabTaskNav(2)" class="cate" :class="tabIndex == 2?'taskActive':''">
				已完成药材
				<view v-if="tabIndex == 2" class="task_tab_xhx"></view>
			</view>
		</view>
		<!-- 可购买商城 -->
		<view class="" v-if="tabIndex == 0">
			<chip-plant-list></chip-plant-list>
		</view>
		<!-- 自己拥有 -->
		<view class="" v-if="tabIndex == 1">
			<chip-plant-own></chip-plant-own>
		</view>
		<!-- 已完成 -->
		<view class="" v-if="tabIndex == 2">
			<chip-plant-finish></chip-plant-finish>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0
			}
		},
		methods: {
			// 标签切换
			tabTaskNav(index) {
				this.tabIndex = index;
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-cate {
		height: 75rpx;
		display: flex;
		line-height: 75rpx;
		justify-content: space-around;
		.cate{
			position: relative;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
	
	.taskActive{
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 700;
	}
	
	.task_tab_xhx{
		position: absolute;
		top: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 8rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
	}
	.list{
		width: 100%;
		background-color: #ffffff;
	}
</style>